<template>

    <div class="home">
        <banner-swiper></banner-swiper>
        <div class="zg_main">
            <home-guide></home-guide>

            <home-class></home-class>
            <class-categories :subjctTypes=subjctTypes[1] :Category=freeCategory></class-categories>
            <class-categories :subjctTypes=subjctTypes[2] :Category=costCategory></class-categories>
            <bottom-rail></bottom-rail>
        </div>
    </div>
</template>

<script>
    import BannerSwiper from "../components/index/BannerSwiper"
    import HomeGuide from "../components/HomeGuide"
    import axios from "axios"

    export default {
        name: 'Home',
        components: {
            BannerSwiper, HomeGuide
        }, data() {
            return {
                subjctTypes: [{
                    category_id: "精品网课",
                    subject_id: ["1互联网营销", "2设计", "3Web前端", "4程序开发", "6Office"]
                }, {
                    category_id: '免费课程',
                    subject_id: ["1互联网营销", "2设计", "3Web前端", "4程序开发"]
                },
                    {
                        category_id: '就业面授班',
                        subject_id: ["1互联网营销", "1019Java", "1023大数据开发 ", "1020软件测试"]
                    }],
                freeCategory: '', costCategory: '',
                freeReqbody: {
                    "pageSize": 10,
                    "priceType": 2,
                },
                costReqbody: {
                    "pageSize": 10,
                    "priceType": 1,
                }
            }
        },
        created() {
            const _this = this
            axios.post("http://localhost:8080/api/course/getCourseList", this.freeReqbody).then(function (resp) {
                _this.freeCategory = resp.data.records
                for (var i in _this.freeCategory) {
                    _this.$set(_this.freeCategory[i], 'style', "display: block;")
                }
                console.log(_this.freeCategory)

            })
            axios.post("http://localhost:8080/api/course/getCourseList", this.costReqbody).then(function (resp) {
                _this.costCategory = resp.data.records
                _this.$set(_this.costCategory[i], 'style', "display: block;")
            })
        }
    }
</script>
